import { Node } from "@antv/x6";

class ModelRect extends Node {}
ModelRect.config({
  width: 180,
  height: 32,
  attrs: {
    body: {
      width: 178,
      height: 30,
      x: 1,
      y: 1,
      stroke: "#5F95FF",
      strokeWidth: 1,
      fill: "rgba(95,149,255,0.05)",
    },
    image: {
      "xlink:href":
        "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
      width: 16,
      height: 16,
      x: 8,
      y: 8,
    },
    title: {
      text: "Node",
      refX: 40,
      refY: 4,
      fill: "rgba(0,0,0,0.85)",
      fontSize: 12,
      fontWeight: 600,
      "text-anchor": "start",
    },
    info: {
      text: "this is content text",
      refX: 40,
      refY: 18,
      fontSize: 10,
      fontWeight: 600,
      fill: "rgba(0,0,0,0.6)",
      "text-anchor": "start",
    },
  },
  markup: [
    {
      tagName: "rect",
      selector: "body",
    },
    {
      tagName: "image",
      selector: "image",
    },
    {
      tagName: "text",
      selector: "title",
    },
    {
      tagName: "text",
      selector: "info",
    },
  ],
  ports: {
    groups: {
      in: {
        position: "top",
        label: {
          position: "top",
        },
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            // stroke: '#31d0c6',
            // fill: '#fff',
            strokeWidth: 1,
          },
          text: {
            fontSize: 10,
            fontWeight: 400,
          },
        },
      },
      out: {
        position: "bottom",
        label: {
          position: "bottom",
        },
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            // stroke: '#31d0c6',
            // fill: '#fff',
            strokeWidth: 1,
          },
          text: {
            fontSize: 10,
            fontWeight: 400,
          },
        },
      },
    },
  },
});

export { ModelRect };
